<!--
 * @Author: wupeiwen <javapeiwen2010@gmail.com>
 * @Date: 2022-05-25 13:49:14
 * @LastEditors: wupeiwen <javapeiwen2010@gmail.com>
 * @LastEditTime: 2023-10-23 19:32:24
 * @FilePath: /tea-garden-web/src/pages/overview/subject-pick.vue
 * @Description: 专题-采摘预测
-->
<template>
  <div class="subject-pick">
    <div class="content">
      <i
        class="icon-button-back"
        @click="$router.go(-1)"
      />
      <span class="module-name">历史记录</span>
      <div class="subject-content">
        <el-row class="title-area">
          <el-col :span="11" class="title">
            <div>{{ $route.query.history == 1 ? '土壤监测数据' : '气象监测数据'}}</div>
            <div class="grey-color">{{ $route.query.history == 1 ? '土壤监测数据' : '气象监测数据'}}曲线图</div>
          </el-col>
          <el-col :span="13" class="title">
            <div class="flex-right">
              <el-date-picker
                v-model="dateTime"
                @change="getHistory()"
                :clearable="false"
                size="mini"
                type="daterange"
                format="MM-DD"
                range-separator="-"
              >
              </el-date-picker>
            </div>
            <div class="flex-right">
              <el-select class="deviceSelect" @change="changeDeviceTag()" v-model="deviceNameTag" placeholder="请选择">
                <el-option
                  :label="'全部'"
                  :value="'全部'">
                </el-option>
                <el-option
                  v-for="item in echartsData.series"
                  :key="item.name"
                  :label="item.name"
                  :value="item.name">
                </el-option>
              </el-select>
            </div>
          </el-col>
        </el-row>
        <section class="info-box-3">
          <component-line-chart4 ref="chartsData" />
        </section>
        <div class="farming-task-content" v-if="soilList && $route.query.history == 1">
          <div class="farming-task-label">
            <div class="farming-task-label-title">土壤监测</div>
            <span class="farming-task-label-time"><span>更新时间：{{ nowDate }}</span> </span>
          </div>
          <div class="farming-task-tag">
            <div>温度:{{ soilList.wenDu }}</div>
            <div>湿度:{{ soilList.shiDu }}</div>
            <div class="noRight">电导率:{{ soilList.dianDaoLv }}</div>
            <div>氮:{{ soilList.dan }}</div>
            <div>磷:{{ soilList.lin }}</div>
            <div class="noRight">钾:{{ soilList.jia }}</div>
          </div>
        </div>
        <div class="farming-task-content" v-if="weatherList.length && $route.query.history == 2">
          <div class="farming-task-label">
            <div class="farming-task-label-title">气象监测</div>
            <span class="farming-task-label-time">更新时间：{{ weatherList[0].createTime }}</span>
          </div>
          <div class="farming-task-tag" v-if="weatherList.length">
            <div>温度:{{ weatherList[0].tem }}°C</div>
            <div>湿度:{{ weatherList[0].humidity }}</div>
            <div class="noRight">天气:{{ weatherList[0].wea }}</div>
            <div>风向:{{ weatherList[0].win }}</div>
            <div>风速:{{ weatherList[0].winMeter }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { get } from '@/util/http.js'
import moment from 'moment'
export default {
  watch: {
  },
  data () {
    return {
      weatherList: [],
      soilList: null,
      dateTime: [moment().subtract(6, 'days').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')],
      nowDate: moment().format('YYYY-MM-DD HH:mm:ss'),
      echartsData: {},
      deviceNameTag: '全部',
      categories: []
    }
  },
  computed: {
  },
  methods: {
    async getData () {
      // 气象
      get({ url: '/weather/list' }).then(res => {
        this.weatherList = res
        this.weatherList[0].createTime = moment(this.weatherList[0].createTime).format('MM/DD HH:mm:ss')
      })
      // 土壤监测
      get({ url: '/device/getSoil' }).then(res => {
        this.soilList = res
      })
    },
    getHistory () {
      // 历史
      get({
        url: '/device/getHistoryData',
        params: {
          type: Number(this.$route.query.history) === 1 ? 0 : 1,
          startTime: moment(this.dateTime[0]).format('YYYY-MM-DD'),
          endTime: moment(this.dateTime[1]).format('YYYY-MM-DD')
        }
      }).then(res => {
        this.echartsData = res
        this.categories = []
        this.echartsData.categories.map(async item => {
          this.categories.unshift(moment(item).format('M.D'))
        })
        this.echartsData.series.map(async item => {
          item.data.reverse()
        })
        // this.$refs.chartsData.getDataList({
        //   categories: this.categories.reverse(),
        //   series: this.echartsData.series
        // })
        this.changeDeviceTag()
      })
    },
    changeDeviceTag () {
      const series = this.echartsData.series.filter(item => {
        return this.deviceNameTag === '全部' ? true : item.name === this.deviceNameTag
      })
      this.$refs.chartsData.getDataList({
        categories: this.categories,
        series: series
      })
    }
  },
  created () {
    this.getData()
    this.getHistory()
  }
}
</script>

<style lang="scss">
@mixin top {
  .icon-button-back {
    position: absolute;
    left: 16px;
    top: 18.5px;
    width: 22.5px;
    height: 22.5px;
    background-image: url("/public/image/common/icon-button-back-02.png");
    background-size: cover;
    cursor: pointer;
  }
  .module-name {
    position: absolute;
    left: 25%;
    right: 25%;
    top: 17px;
    text-align: center;
    font-size: 18px;
    font-family: PingFang SC-Heavy, PingFang SC;
    font-weight: 800;
    color: #ffffff;
  }
  .subject-content {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 719px;
    background: #ffffff;
    box-shadow: 1px 0px 4px 1px rgba(0, 0, 0, 0.25);
    border-radius: 15px;
    padding: 25.5px 15px 16px 20px;
  }
}
.subject-pick {
  width: 308px;
  height: 780px;
    margin-top: -45px;
  transform: scale(0.89);
  .content {
    position: relative;
    height: 100%;
    @include top;
    .title-area {
      margin-bottom: 10px;
      margin-top: 21px;
      &:first-of-type {
        margin-top: 0;
      }
      .title {
        font-size: 16px;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: bold;
        color: #333333;
      }
      .subtitle {
        font-size: 12px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #888c96;
        text-align: right;
      }
    }
    .info-box-1 {
      width: 272.5px;
      height: 56.5px;
      background-image: url("/public/image/subject/bg-info-box-01.png");
      background-size: cover;
      background-position: -2px -6px;
      position: relative;
      .date1 {
        font-size: 16px;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: bold;
        color: #089BAB;
        position: absolute;
        top: 7px;
        left: 13.5px;
        span {
          &:first-of-type {
            &::after {
              content: '-';
              margin-left: 8px;
              margin-right: 8px;
            }
          }
        }
      }
      .date2{
        font-size: 12px;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #9CD7DD;
        position: absolute;
        bottom: 6.5px;
        left: 13.5px;
        span {
          &:first-of-type {
            &::after {
              content: '至';
              margin-left: 6px;
              margin-right: 6px;
            }
          }
        }
      }
    }
    .info-box-2 {
      height: 170px;
      overflow-x: scroll;
      overflow-y: hidden;
      white-space: nowrap;
      .single-weather {
        width: 30px;
        height: 165px;
        margin-right: 12.5px;
        background: rgba(230,245,246,0.8);
        border-radius: 5px 5px 5px 5px;
        display: inline-block;
        vertical-align: top;
        &:last-of-type {
          margin-right: 0;
        }
        .week-day {
          height: 35px;
          font-size: 10px;
          font-family: PingFang SC-Bold, PingFang SC;
          font-weight: bold;
          color: #089BAB;
          text-align: center;
        }
        .date {
          height: 35px;
          font-size: 10px;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #9CD7DD;
          text-align: center;
        }
        .weather-icon {
          height: 40px;
          span {
            transform: scale(0.43);
            transform-origin: left top;
          }
        }
        .max-temperature {
          height: 35px;
          font-size: 10px;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #089BAB;
          text-align: center;
          &::after {
              content: '°C';
          }
        }
        .min-temperature {
          height: 35px;
          font-size: 10px;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #089BAB;
          text-align: center;
          &::after {
              content: '°C';
          }
        }
      }
    }
    .info-box-3 {
      .sub-info-box-1 {
        display: flex;
        height: 38px;
        margin-bottom: 10px;
        .info-item {
          flex: 1;
          .name {
            display: block;
            font-size: 12px;
            font-family: PingFang SC-Bold, PingFang SC;
            font-weight: bold;
            color: #8A94A6;
            line-height: 17px;
            margin-bottom: 4px;
            text-align: center;
          }
          .value {
            display: block;
            font-size: 12px;
            font-family: PingFang SC-Medium, PingFang SC;
            font-weight: 500;
            line-height: 17px;
            text-align: center;
            &::before {
              display: inline-block;
              content: '';
              width: 10px;
              height: 10px;
              border-radius: 5px;
              margin-right: 7.5px;
            }
            &::after {
              display: inline-block;
              content: '';
            }
          }
          &:nth-of-type(1) {
            .value {
              color: #9CD7DD;
              &::before {
                background-color: #9CD7DD;
              }
            }
          }
          &:nth-of-type(2) {
            .value {
              color: #089BAB;
              &::before {
                background-color: #089BAB;
              }
            }
          }
          &:nth-of-type(3) {
            .value {
              color: #369AFE;
              &::before {
                background-color: #369AFE;
              }
            }
          }
        }
      }
    }
  }
}
.farming-task-title {
  background: #089BAB;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  display: flex;
  align-items: center;
  img {
    width: 15px;
    margin-right: 5px;
  }
}
.farming-task-image {
  position: relative;
  font-weight: 300;
  font-size: 0;
  img {
    margin-top: 10px;
    border-radius: 8px;
    max-height: 160px;
    width: 100%;
  }
  .farming-task-time {
    position: absolute;
    bottom: 11px;
    font-size: 12px;
    background: #00000060;
    padding: 5px 15px 5px 6px;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    color: #fff
  }
}
.farming-task-content {
  margin-top: 15px;
  .farming-task-label {
    display: flex;
    font-size: 12px;
    justify-content: space-between;
    align-items: center;
  }
  .farming-task-label-title {
    font-weight: bold;
    margin-bottom: 5px;
    span {
      color: #999;
      font-weight: 400;
      margin-left: 7px;
      -webkit-text-size-adjust: none; /* 关闭WebKit对文本大小的自动调整 */
      font-size: 10px; /* 尝试设置小于12px的字体大小 */
    }
  }
  .farming-task-label-time {
    color: #999;
    display: flex;
    align-items: center;
    -webkit-text-size-adjust: none; /* 关闭WebKit对文本大小的自动调整 */
    font-size: 10px; /* 尝试设置小于12px的字体大小 */
    img {
      width: 15px
    }
  }
  .farming-task-tag {
    color: #089BAB;
    font-size: 12px;
    display: flex;
    align-items: center;
    font-weight: 500;
    flex-wrap: wrap;
    > div {
      box-shadow: 0px 1px 6px 0px rgba(0,0,0,0.08);
      border-radius: 3px;
      padding: 3px 6px 4px 6px;
      margin-top: 8px;
      margin-right: 6px;
    }
   .noRight {
      margin-right: 0 !important;
   }
  }
}

</style>
